<template>
  <div class="test-wrapper">
    <div class="test-box">
      <div class="textTile flex-h">
        <span class="sp1 flex1">{{ tabNum < testLength ? '班主任培训试题':'成绩单'}}</span>
        <span class="sp2" v-show="tabNum<testLength">
          <b>{{tabNum+1}}</b>
          <i>/{{testLength}}</i>
        </span>
      </div>
      <div v-if="tabNum<testLength">
        <div v-for="(item,index) in dyznData.RECORDS" :key="index">
          <div v-show="index===tabNum">
            <div class="status">{{item.question_type==1?'单选题':'多选题'}}</div>
            <div class="scrolls">
                   <scroll-view class="scroll-view_H" scroll-y="true" bindscroll="scroll" style="width: 100%;height:80vh">
            
            <div class="textQuestions">
              <span>{{index*1+1 +'. ' }}{{item.question_content}}</span>
            </div>
            <div class="commonBox has-bottombar grown" v-show="item.question_type == 1">
              <span
                :class="['sp1',chooseStr==='a'?'active':'']"
                @click="clcyes(index,item.option_a,'a')"
              >{{'A.'+ item.option_a}}</span>
              <span
                :class="['sp1',chooseStr==='b'?'active':'']"
                @click="clcyes(index,item.option_b,'b')"
              >{{'B.'+item.option_b}}</span>
              <span
                :class="['sp1',chooseStr==='c'?'active':'']"
                @click="clcyes(index,item.option_c,'c')"
              >{{'C.'+item.option_c}}</span>
              <span
                :class="['sp1',chooseStr==='d'?'active':'']"
                @click="clcyes(index,item.option_d,'d')"
              >{{'D.'+item.option_d}}</span>
              <span
                v-if="item.option_e"
                :class="['sp1',chooseStr==='e'?'active':'']"
                @click="clcyes(index,item.option_e,'e')"
              >{{'E.'+item.option_e}}</span>
            </div>
            <div class="commonBox has-bottombar grown" v-show="item.question_type == 2">
              <span
                :class="['sp1',duoxuan[0]== 'a'?'active':'']"
                @click="clcyes1(index,item.option_a,'a')"
              >{{'A.'+item.option_a}}</span>
              <span
                :class="['sp1',duoxuan[0]== 'b' || duoxuan[1]== 'b'?'active':'']"
                @click="clcyes1(index,item.option_b,'b')"
              >{{'B.'+item.option_b}}</span>
              <span
                :class="['sp1',duoxuan[0]== 'c' || duoxuan[1]== 'c' || duoxuan[2]== 'c' ?'active':'']"
                @click="clcyes1(index,item.option_c,'c')"
              >{{'C.'+item.option_c}}</span>
              <span
                :class="['sp1',duoxuan[0]== 'd' || duoxuan[1]== 'd' || duoxuan[2]== 'd' ||duoxuan[3]== 'd' ?'active':'']"
                @click="clcyes1(index,item.option_d,'d')"
              >{{'D.'+item.option_d}}</span>
              <span
                v-if="item.option_e"
                :class="['sp1',duoxuan[0]== 'e' || duoxuan[1]== 'e' || duoxuan[2]== 'e' ||duoxuan[3]== 'e' || duoxuan4== 'e' ?'active':'']"
                @click="clcyes1(index,item.option_e,'e')"
              >{{'E.'+item.option_e}}</span>
            </div>
            <div style="height:200rpx"></div>
            </scroll-view>
            </div>
            <div class="btn-box flex-h">
              <div @click="pre(index,item.question_type)" class="left">上一题</div>
              <div
                v-if="tabNum<testLength-1"
                @click="next(index,item.question_type)"
                class="right"
              >下一题</div>
              <div v-else @click="saveTeacherTestRecord" class="right">提交</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="bgbox flex-h">
          <div class="left">
            <img class="avatar" src="/static/images/defaultAvatar.png" alt />
            <span>老师</span>
          </div>
          <div class="right">{{testName}}</div>
        </div>
        <div class="fanllydesc">结果敬请期待</div>
      </div>
    </div>
  </div>
</template>
<script>
// import ls from 'store2';
import dyznData from "../../../static/json/headteacher_test.json";
export default {
  data() {
    return {
      // ESJTINPF
      tabNum: 0,
      count: 0,
      dyznData: dyznData,
      mbtiScore: [],
      chooseStr: "",
      duoxuan: "",
      testLength: 50,
      testName: ""
    };
  },
  computed: {},
  onLoad(e) {

    if (!e.history) {
      Object.assign(this.$data, this.$options.data());
    }
    if (e.tesrtInfo) {
      this.testInfo = JSON.parse(e.tesrtInfo);
      this.testName = this.testInfo.testName;
      console.log("this.testName: ", this.testName);
    }
  },
  mounted: function() {
    let ary = [];
    this.dyznData.RECORDS.forEach(item => {
      if (item.question_type == 1) {
        ary.push(item);
      }
    });
    this.singleLength = ary.length;
    this.testLength = this.dyznData.RECORDS.length;
    console.log('this.testLength: ', this.testLength)
  },
  methods: {
    saveTeacherTestRecord() {
      this.tabNum = this.testLength;
      const teacherData = JSON.parse(wx.getStorageSync("teacherData"));
      let singleAnswer = this.mbtiScore.slice(0, this.singleLength);
      singleAnswer = singleAnswer.join(",");
      let multipeAnswer = this.mbtiScore.slice(this.singleLength);
      multipeAnswer = multipeAnswer.join(",");
      let obj = {
        idCard: this.testInfo.testCard,
        mobile: this.testInfo.testTel,
        multipeAnswer: multipeAnswer,
        name: this.testInfo.testName,
        singleAnswer: singleAnswer,
        uid: teacherData.userVoId
      };
       wx.request({
        url: 'https://flight-code.sx985.com/teacher/exam/submit',
        data: obj,
        method:'post',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          console.log('res: ', res)
          if (res.data.code == "200") {
              wx.showToast({
                title: res.data.data,
                icon: "success",
                duration: 2000
              })          
          } else {
               wx.showToast({
                title: '提交失败',
                icon: "none",
                duration: 2000
              })
          }
        }
      })
    },
    next(indexs, question_type) {
      if (!this.mbtiScore[indexs]) {
        wx.showToast({
          title: "您还未做选择",
          icon: "none",
          duration: 1000
        });
        return;
      }
      this.tabNum = indexs + 1;
      if (indexs > this.singleLength - 1) {
        if (!this.mbtiScore[indexs + 1]) {
          this.duoxuan = "";
        } else {
          this.duoxuan = this.mbtiScore[indexs + 1];
        }
      } else {
        if (!this.mbtiScore[indexs + 1]) {
          this.chooseStr = "";
        } else {
          this.chooseStr = this.mbtiScore[indexs + 1];
        }
      }
    },
    pre(indexs, question_type) {
      if (indexs === 0) {
        wx.showToast({
            title: "没有上一题了",
            icon: "none",
            duration: 1000
          });
          return;
        }
        this.tabNum = indexs - 1
        if (indexs > this.singleLength) {
          this.duoxuan = this.mbtiScore[indexs - 1]
        } else {
          this.chooseStr = this.mbtiScore[indexs - 1]
        }
    },
    clcyes(indexs, stats, check) {
      this.chooseStr = check;
      this.mbtiScore[indexs] = check
    },
    clcyes1(indexs, stats, check) {
      if (this.duoxuan.indexOf(check) === -1) {
        this.duoxuan += check
      } else {
        this.duoxuan = this.duoxuan.replace(check, "")
      }
      this.duoxuan = Array.from(this.duoxuan).sort().join("");
      this.mbtiScore[indexs] = this.duoxuan
    }
  }
};
</script>


<style scoped lang="less">
@mainColor: rgba(38, 132, 253, 1);
.test-wrapper {
  width: 100%;
  height: 100vh;
  padding: 30rpx;
  box-sizing: border-box;
  .test-box {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx 0px rgba(204, 204, 204, 0.3);
    border-radius: 40rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    position: relative;
    .btn-box {
      position: absolute;
      bottom: 30rpx;
      //  align-content: space-between;
      .left,
      .right {
        width: 280rpx;
        height: 88rpx;
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
        line-height: 88rpx;
        border-radius: 44rpx;
      }
      .left {
        border: 1px solid rgba(255, 173, 13, 1);
        background: rgba(255, 255, 255, 1);
        color: rgba(255, 173, 13, 1);
      }
      .right {
        background: rgba(255, 173, 13, 1);
        border: 1px solid rgba(255, 173, 13, 1);
        color: #fff;
        margin-left: 68rpx;
      }
    }
  }
}
.flex-h {
  display: flex;
  align-items: center;
}
.flex1 {
  flex: 1;
}
.textTile {
  height: auto;
  width: 100%;
  border-bottom: 1rpx solid rgba(238, 238, 238, 1);
  height: 120rpx;

  .sp1 {
    font-size: 40rpx;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 44rpx;
  }

  .sp2 {
    width: 100rpx;
    text-align: right;
    b,
    i {
      display: inline;
    }
    b {
      font-size: 40rpx;
      font-weight: bold;
      color: #ffad0d;
    }

    i {
      font-size: 22rpx;
      font-weight: bold;
      color: #bbbbbb;
    }
  }
}
.status {
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(255, 173, 13, 1);
  height: 100rpx;
  line-height: 100rpx;
}
.textQuestions {
  width: 100%;
  height: auto;
  margin-bottom: 50rpx;

  span {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 45rpx;
  }
}

.titlesDrag {
  width: 100%;
  height: 80rpx;
  margin-top: 50rpx;

  .sp1,
  .sp2 {
    font-size: 26rpx;
    font-weight: bold;
    box-sizing: border-box;
    height: 80rpx;
  }

  .sp1 {
    width: 150rpx;
    padding-top: 40rpx;
    color: @mainColor;
  }

  .sp2 {
    padding-top: 20rpx;

    color: rgba(187, 187, 187, 1);
  }
}

.titlesDrag1 {
  height: 40rpx;
  margin-top: 0;
  font-size: 30rpx;

  .sp1,
  .sp2 {
    height: 40rpx;
    padding-top: 0;
    color: rgba(187, 187, 187, 1);
  }
}

.commonBox {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.grown {
  .sp1 {
    width: 620rpx;
    height: auto;
    border-radius: 10rpx;
    padding: 20rpx;
    border: 2rpx solid rgba(238, 238, 238, 1);
    font-size: 30rpx;
    display: block;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 40rpx;
    text-align: left;
    box-sizing: border-box;
    margin-top: 15rpx;
  }
  .active {
    background: rgba(255, 245, 229, 1);
    color: rgba(255, 160, 0, 1);
  }
  .sp3 {
    width: 610rpx;
    height: 90rpx;
    border-radius: 10rpx;
    border: 2rpx solid @mainColor;
    margin: 0 auto;
    display: block;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    color: @mainColor;
  }

  span:nth-of-type(1) {
    margin-right: 20rpx;
  }
}
.bgbox {
  width: 100%;
  height: 200rpx;
  //  background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/me_bg_pic.png') no-repeat;
  // background-size: 100% 100%;
  background: #f6f6f6;
  margin-top: 30rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  .left {
    width: 140rpx;
    height: 160rpx;
    position: relative;
    img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }
    span {
      display: block;
      width: 100rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background: #ffad0d;
      font-size: 24rpx;
      font-weight: 500;
      color: rgba(255, 253, 253, 1);
      text-align: center;
      line-height: 40rpx;
      position: absolute;
      bottom: 0;
      left: 20rpx;
    }
  }
  .right {
    font-size: 44rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    padding-left: 60rpx;
    box-sizing: border-box;
  }
}
.fanllydesc {
  text-align: center;
  font-size: 36rpx;
  margin-top: 130rpx;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}
</style>
